@page
@{ Layout = "_Layout"; }
@section Styles{
  <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="/sitefiles/assets/css/xblms.min.css" rel="stylesheet" type="text/css" />
  <style>
    .ion-person:before,
    .ion-locked:before,
    .ion-image:before,
    .ion-ipad:before,
    .ion-chatbubble:before {
      width: 16px;
      font-size: 18px;
    }
    html{
        overflow:hidden;
    }

        .wrapper-page {
            max-width: 399px;
        }
  </style>
}

<div class="wrapper-page">
    <el-card>
        <div slot="header" class="clearfix">
            <el-row style="display:flex;align-items:center;justify-content:space-between;">
                <el-col :span="16">
                    <span>{{ loginTitle }}</span>
                    <div>
                        请登录
                    </div>
                </el-col>
                <el-col :span="6" style="text-align:right;">
                    <img src="/sitefiles/assets/images/logo.png" width="66" />
                </el-col>
            </el-row>
        </div>
  <div>

    <form v-on:submit="btnSubmitClick" class="form-horizontal" method="post">

        <template v-if="pageAlert">
            <div class="alert" :class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }">
                <span v-html="pageAlert.html"></span>
            </div>
        </template>

        <template>

            <div class="form-group row">
                <div class="col-12">
                  <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-user-circle-o"></i>
                        </span>
                    </div>
                    <input v-model="account" :class="{ 'is-invalid': pageSubmit && !account }" class="form-control" type="text"
                            v-focus placeholder="请输入用户名" autocomplete="off">
                  </div>
                </div>
            </div>
    
            <div class="form-group row">
              <div class="col-12">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-key"></i>
                    </span>
                  </div>
                  <input v-model="password" :class="{ 'is-invalid': pageSubmit && !password }" class="form-control"
                          type="password" placeholder="请输入密码" autocomplete="off">
                </div>
              </div>
            </div>
    
            <div v-if="!isAdminCaptchaDisabled" class="form-group row">
              <div class="col-12">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fa fa-picture-o"></i>
                    </span>
                  </div>
                  <input v-model="captchaValue" :class="{ 'is-invalid': pageSubmit && !captchaValue }" class="form-control" type="text"
                          placeholder="请输入验证码">
                </div>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-6">
                 <el-checkbox v-model="isPersistent">下次自动登录</el-checkbox>
              </div>
              <div class="col-6">
                <a v-if="!isAdminCaptchaDisabled" href="javascript:;" v-on:click="btnCaptchaClick">
                  <img v-show="captchaUrl" style="display: none" class="float-right rounded" :src="captchaUrl" align="absmiddle">
                </a>
              </div>
            </div>

        </template>

        <div class="form-group row">
          <div class="col-12">
              <el-button type="primary" v-on:click="btnSubmitClick" style="width:100%;">登 录</el-button>
          </div>
        </div>

    </form>
  </div>
  </el-card>
    <div class="text-muted text-center" style="margin-top:18px;">
        <small>{{ DOCUMENTTITLE }}</small>
    </div>
</div>

@section Scripts{
<script src="/sitefiles/assets/lib/md5-2.10.0.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/admin/login.js" type="text/javascript"></script> }